<template>
  <div class="dialog-container">
    <div class="dialog-content">
      <div class="text-desc">剩余可申领采集{{ listSource[0].count }}条,用户发布{{ listSource[1].count }}条</div>
      <el-form ref="form" size="mini" :model="form" label-width="80px">
        <el-form-item prop="number" label="申领数量" required>
          <el-radio-group v-model="form.number">
            <el-radio v-for="item in listNumber" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="order" label="排序" required>
          <el-radio-group v-model="form.order">
            <el-radio v-for="item in listOrder" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="area" label="地区">
          <el-cascader v-model="area" clearable :options="areaList" collapse-tags :props="props" @change="handleAreaChange"></el-cascader>
        </el-form-item>
        <el-form-item prop="time" label="时间">
          <el-date-picker v-model="time" type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="handleTimeChange"> </el-date-picker>
        </el-form-item>
        <el-form-item prop="source" label="信息来源" required>
          <el-radio-group v-model="form.source">
            <el-radio v-for="item in listSource" :key="item.value" :label="item.value" :disabled="item.count === 0">{{ item.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item style="margin-bottom: 0; margin-top: 40px">
          <div class="panel-line flex-end">
            <el-button @click="onCancel">取消</el-button>
            <el-button
              :loading="loading"
              type="primary"
              @click="onSubmit"
              :disabled="!((form.source === 1 && listSource[0].count > 0) || (form.source === 2 && listSource[1].count))"
              :title="!((form.source === 1 && listSource[0].count > 0) || (form.source === 2 && listSource[1].count)) ? '暂无可申领条数' : '立即申领'"
              >立即申领</el-button
            >
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { apiApplyCount, apiApplyUserAccept } from '@/api/assetsPublic'
import { formatDate } from '@/utils'

export default {
  name: 'DialogApply',
  props: {
    areaList: Array,
  },
  data() {
    return {
      loading: false,
      listNumber: [
        { value: 10, label: 10 },
        { value: 20, label: 20 },
        { value: 30, label: 30 },
        { value: 100, label: 100 },
      ],
      listOrder: [
        { value: 1, label: '正序' },
        { value: 2, label: '倒序' },
      ],
      listSource: [
        { value: 1, label: '采集', count: 0 },
        { value: 2, label: '用户发布', count: 0 },
      ],
      form: {
        number: 10,
        order: 1,
        source: 1,
        sheng_id: [],
        shi_id: [],
        zone_id: [],
        start_time: '',
        end_time: '',
        is_area_choice: '',
      },
      time: [],
      area: [],
      props: { value: 'code', label: 'name', checkStrictly: true, multiple: 'true' },
      areaValue: [],
    }
  },
  mounted() {
    this.init()
  },
  destroyed() {},
  methods: {
    init() {
      const query = JSON.parse(localStorage.getItem('assets_apply_query'))
      const queryArea = JSON.parse(localStorage.getItem('assets_apply_query_area'))
      if (query) {
        let list = ['number', 'order', 'source']
        for (let key in query) {
          if (list.includes(key)) {
            this.form[key] = query[key]
          }
        }
        this.time = [query.start_time, query.end_time]
        this.handleTimeChange(this.time, 'init')
      } else {
        const today = formatDate(new Date(), 'Y-M-D')
        this.time = [today, today]
        this.handleTimeChange(this.time, 'init')
      }
      if (queryArea) {
        this.area = queryArea
        this.handleAreaChange(this.area, 'init')
      }
      this.getData()
    },
    getData() {
      apiApplyCount({
        sheng_id: this.form.sheng_id,
        shi_id: this.form.shi_id,
        zone_id: this.form.zone_id,
        start_time: this.form.start_time,
        end_time: this.form.end_time,
        is_area_choice: this.form.is_area_choice,
      }).then((res) => {
        const { data, data2 } = res
        this.listSource[0].count = data
        this.listSource[1].count = data2
      })
    },
    // 取消
    onCancel() {
      this.$emit('close')
    },
    // 立即申领
    onSubmit() {
      this.loading = true
      localStorage.setItem('assets_apply_query_area', JSON.stringify(this.areaValue))
      localStorage.setItem('assets_apply_query', JSON.stringify(this.form))
      apiApplyUserAccept(this.form)
        .then((res) => {
          this.$message({
            message: '申领成功',
            type: 'success',
          })
          setTimeout(() => {
            this.loading = false
            this.$emit('success')
          }, 1000)
        })
        .catch(() => {
          this.loading = false
        })
    },
    // 时间变动
    handleTimeChange(value, type) {
      if (value) {
        this.form.start_time = value[0]
        this.form.end_time = value[1]
      } else {
        this.form.start_time = this.form.end_time = ''
      }
      if (type !== 'init') {
        this.getData()
      }
    },
    // 地区变动
    handleAreaChange(value, type) {
      this.areaValue = value
      this.form.sheng_id = []
      this.form.shi_id = []
      this.form.zone_id = []
      this.form.is_area_choice = 0
      let all = false
      value.forEach((item) => {
        if (item[0] === -2) {
          // 全国
          all = true
        } else if (item[0] === -1) {
          // 未分配地区
          this.form.is_area_choice = 1
        } else {
          const length = item.length
          if (length === 1) {
            this.form.sheng_id.push(item[0])
          } else if (length === 2) {
            this.form.shi_id.push(item[1])
          } else if (length === 3) {
            this.form.zone_id.push(item[2])
          }
        }
      })
      if (all) {
        this.form.sheng_id = []
        this.form.shi_id = []
        this.form.zone_id = []
        this.form.is_area_choice = 0
      }
      if (type !== 'init') {
        this.getData()
      }
    },
  },
}
</script>

<style scoped lang="scss">
.text-desc {
  width: 100%;
  padding: 10px 16px;
  background: #fef3e4;
  margin-bottom: 30px;
}
</style>
